<template>
  <div>
    <!-- main部分 -->
    <!-- 通过KeepAlive实现路由组件的保活 -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component v-if="$route.meta.keepAlive" :is="Component" />
      </keep-alive>
      <component v-if="!$route.meta.keepAlive" :is="Component" />
    </router-view>

    <!-- 底部选项卡部分 -->
    <van-tabbar route v-model="active" active-color="#f03d37" inactive-color="#333333">
      <van-tabbar-item icon="home-o" to="/home/index">
        <span>首页</span>
        <template #icon="props">
          <!-- <img :src="require(
            `../assets/tabs/index_${props.active ? 1 : 0}.png`)" alt=""> -->
          <img :src="`/tabs/index_${props.active ? 1 : 0}.png`" alt="">
        </template>
      </van-tabbar-item>

      <van-tabbar-item icon="search" to="/home/video">
        <span>视频</span>
        <template #icon="props">
          <img :src="require(
            `../assets/tabs/video_${props.active ? 1 : 0}.png`)" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home/show">
        <span>演出</span>
        <template #icon="props">
          <img v-if="props.active" src="../assets/tabs/show_1.png" alt="">
          <img v-else src="../assets/tabs/show_0.png" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/home/me">
        <span>我的</span>
        <template #icon="props">
          <img v-show="props.active" src="../assets/tabs/me_1.png" alt="">
          <img v-show="!props.active" src="../assets/tabs/me_0.png" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

/** 底部选项卡相关功能 */
const active = ref(0)


</script>

<style scoped></style>